<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>todulist</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/localdata.js"></script>
</head>

<body>
    <header>
        <section>
            <form>
                <label for="title">ToDoList</label>
                <input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
                    autocomplete="off" />
            </form>
        </section>
    </header>
    <section>
        <h2>今日事项 <span id="todocount">0</span></h2>
        <ol id="todolist" class="demo-box">
            <!-- `<p>{{usrTxt}}</p> <a href="javascript:;" onclick="del(this)"></a>` -->
            <!-- <p>{{content}}</p><a href="javascript:;"></a> -->
        </ol>
    </section>

    <section>
        <h2>已完成事项 <span id="todoall">0</span></h2>
        <ul id="list" class="demo-box">

        </ul>
    </section>


    <footer>
        Copyright &copy; 嗨~帅哥
    </footer>

    <script type="text/html" id='tpl-table'>
        <li class="toduli">
             <p>{{content}}</p><a href="javascript:;" class="aj"></a>
        </li>
    </script>

    <script type="text/html" id='tpl-table-1'>
        <li class="toduli-1">
             <p>{{content}}</p><a href="javascript:;" class="bj"></a>
        </li>
    </script>
    <script src="./jq/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script>
        // 获取两项中的li的个数
        let lenbj = $('#list').children('li').length
        let lenaj = $('#todolist').children('li').length
        // submit
        // form表单提提交
        function getData() {
            const data = localStorage.getItem("tenko")
            if (data !== null) {
                return JSON.parse(data)
            }
            return []
        }

        function setData(local) {
            localStorage.setItem('tenko', JSON.stringify(local))
        }

        $('form').on('submit', function (e) {
            e.preventDefault()
            const data = {

                falg: 0,

                content: $('#title').val()
            }


            let local = getData()
            local.push(data)
            setData(local)
            // console.log(local);
            render()
            $('#title').val('')

        })

        // 已完成事件提交
        $('#todolist').on('dblclick', '.toduli', function () {
            // alert(11)
            const data = {
                content: $(this).children('p').text()
            }
            let local = getData()
            // local.push(data)

            // local.some((item) => {
            //     if (item.content == data.content && item.falg == 0) {
            //         item.falg = 1;
            //         return false
            //     }
            // })
            for (const item of local) {
                if (item.content == data.content && item.falg == 0) {
                    item.falg = 1;
                    setData(local)
                    render()
                    return
                }
            }
        })
        // 事件退回
        $('#list').on('dblclick', '.toduli-1', function () {
            const data = {
                content: $(this).children('p').text()
            }
            // console.log(data);
            let local = getData()
            // local.push(data)

            local.some((item) => {
                if (item.content == data.content && item.falg == 1) {
                    item.falg = 0;
                    return true;
                }

            })
            // console.log(local);
            setData(local)
            render()
        })

        render()

        // 数据渲染
        function render() {
            const local = getData()


            // console.log(data);
            let tolihtml = '';
            let dolihtml = '';
            let ajlis = 0;
            let bjlis = 0;
            local.map((item) => {

                if (item.falg == 0) {
                    const newLiHtml = template('tpl-table', item);
                    tolihtml = tolihtml + newLiHtml
                    ajlis++;
                } else {
                    const newToLi = template('tpl-table-1', item);
                    dolihtml = dolihtml + newToLi
                    bjlis++;
                }
            })

            // console.log(tolihtml, dolihtml);
            $('#todolist').html(tolihtml)
            $('#list').html(dolihtml)

            $('#todocount').html(ajlis)
            $('#todoall').html(bjlis)

        }
        // 上删除键
        $('#todolist ').on('click', ' .aj', function () {
            const local = getData()
            const data = {
                content: $(this).siblings('p').text()
            }
            let index = local.findIndex((item) => {
                return item.content == data.content && item.falg == 0
            })
            // console.log(local);
            local.splice(index, 1)
            // console.log(local);
            setData(local)

            render()

        })
        // 下删除键
        $('#list ').on('click', ' .bj', function () {
            const local = getData()
            const data = {
                content: $(this).siblings('p').text()
            }
            let index = local.findIndex((item) => {
                return item.content == data.content && item.falg == 1
            })

            // console.log(local);
            local.splice(index, 1)
            // console.log(local);
            setData(local)
            render()

        })

    </script>

</body>

</html>